<template>
  <div class="alarmCenter">
    <!-- 实时报警 -->
    <alarmCenter_left></alarmCenter_left>
    <!-- 历史数据统计 -->
    <alarmCenter_right></alarmCenter_right>
    <div class="Historical_task" @click="showVisible">
      <span>历史报警记录>></span>
    </div>
    <div class="navBar">
      <span :class="navBarIndex == 0 ? 'nav_btn nav_btn_active' : 'nav_btn'" @click="changeNav(0)">实时报警</span>
      <span :class="navBarIndex == 1 ? 'nav_btn nav_btn_active' : 'nav_btn'" @click="changeNav(1)">历史报警</span>
    </div>
    <dialog_historyAlarm :visible="visible" @closeDialog="closeDialog"></dialog_historyAlarm>
  </div>
</template>

<script setup lang="ts">
import alarmCenter_left from "./components/alarmCenter_left.vue";
import alarmCenter_right from "./components/alarmCenter_right.vue";
import dialog_historyAlarm from "./components/dialog_historyAlarm.vue";

let navBarIndex = ref(0);

const changeNav = (index: number) => {
  if (navBarIndex.value != index) {
    navBarIndex.value = index;
  }
}

let visible = ref(false);

const showVisible = ()=>{
  visible.value = true;
}

const closeDialog = ()=>{
  visible.value = false;
}
</script>

<style lang="scss" scoped>
.alarmCenter {
  .Historical_task {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: vh(14);
    color: #00D7FF;
    line-height: 1;
    position: absolute;
    bottom: vh(75);
    left: vh(340);
    cursor: pointer;
    z-index: 999;
  }

  .navBar {
    position: absolute;
    bottom: vh(96);
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;

    .nav_btn {
      display: inline-block;
      width: vh(97);
      height: vh(30);
      background: rgba(0, 227, 254, 0.2);
      border-radius: vh(4);
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: vh(14);
      color: #FFFFFF;
      line-height: vh(30);
      text-align: center;
      cursor: pointer;

      &:first-child {
        margin-right: vh(21);
      }

      &.nav_btn_active {
        border: 1px solid #00E3FE;
        color: #00E3FE;
      }
    }
  }
}
</style>
